<template>
  <div class="app-containe">
    <div class="op-container">
      <div class="filter-container">
        <span class="filter-title filter-item">身份所属</span>
        <k-select
          v-model="listQuery.userType"
          style="width:200px"
          class="filter-item right-item"
          :select-params="dict.type.IDENTITY_TYPE"
          @handleSelectEvent="handleFilter"
        />

        <span class="filter-title filter-item">合成方式</span>
        <k-select
          v-model="listQuery.synthesisType"
          class="filter-item user-status"
          type="1"
          :select-params="[{label:'1连',value: -1},{label:'2连',value: 0},{label:'3连',value: 1},{label:'4连',value: 4},{label:'5连',value: 5}]"
          @handleSelectEvent="handleFilter"
        />

        <span class="filter-title filter-item">合成时间</span>
        <k-date-picker
          v-model="obtainTimeValue"
          format="yyyy-MM-dd HH"
          value-format="yyyy-MM-dd HH"
          class="filter-item"
        />

        <k-input
          v-model.trim="listQuery.key"
          class="filter-item"
          is-search
          placeholder="请输入关键词"
          :search-fun="handleFilter"
          @keyup.enter.native="handleFilter"
        />
      </div>

      <div style="margin-top: 40px;" />

      <!--表格相关 -->
      <el-table
        ref="multipleTable"
        :data="listData"
        fit
        border
        :show-summary="authorityHandle(217)"
        :summary-method="getSummaries"
        highlight-current-row
        style="width: 100%;border-radius:8px;"
        :header-cell-style="{background:'#F6F5FA',color:'#4E4F62'}"
      >
        <el-table-column width="80px" type="index" label="序号" align="center" />
        <el-table-column prop="mobile" min-width="100px" label="用户账号" align="center" show-overflow-tooltip />
        <el-table-column prop="belongName" min-width="150px" label="身份所属" align="center" show-overflow-tooltip />
        <el-table-column prop="mergeTheme" min-width="100px" label="合成方式" align="center" show-overflow-tooltip />
        <el-table-column prop="createTime" min-width="80px" label="合成时间" align="center" show-overflow-tooltip />
        <el-table-column prop="goodsCnName" min-width="100px" label="获得饰品" align="center" show-overflow-tooltip />
        <el-table-column prop="customPrice" min-width="100px" label="材料价值" align="center" show-overflow-tooltip />
      </el-table>
      <pagination
        v-show="totalRows > 0"
        :total="totalRows"
        :page.sync="listQuery.pager.pageNo"
        :limit.sync="listQuery.pager.pageSize"
        @pagination="loadData"
      />
    </div></div>
</template>
<script>
import Pagination from '@/components/Pagination'

import { syntheseisRecord, syntheseisRecordSumPrice } from '@/api/activity.js'

export default {
  components: {
    Pagination
  },
  dicts: ['IDENTITY_TYPE'],

  filters: {
    statusFilter(v) {
      if (v == 0) {
        return '未消耗'
      } else if (v == -1) {
        return '已过期'
      } else if (v == 1) {
        return '已消耗'
      }
    },
    IdentityBelongFilter(v) {
      if (v == 1) {
        return '官方'
      } else if (v == 2) {
        return '主播'
      } else if (v == 3) {
        return '玩家'
      }
    }
  },
  data() {
    return {
      totalRows: 0, // 分页组件--数据总条数
      listQuery: {
        pager: {
          pageNo: 1,
          pageSize: 10,
          totalRows: '',
          start: ''
        },
        key: '',
        startTime: '',
        endTime: '',
        userType: '', // 身份所属
        synthesisType: '' // 合成方式
      },
      listData: [],
      obtainTimeValue: '',
      userMobile: '',
      customPrice: ''
    }
  },
  watch: {
    // 时间赋值
    obtainTimeValue(val) {
      this.listQuery.startTime = this.obtainTimeValue ? this.obtainTimeValue[0] : null
      this.listQuery.endTime = this.obtainTimeValue ? this.obtainTimeValue[1] : null
    }
  },

  created() {
    this.loadData()
  },
  methods: {

    getSummaries(param) {
      const {
        columns
      } = param
      const sums = []
      columns.forEach((column, index) => {
        if (index === 0) { // 第一列
          sums[index] = '总计'
        } else if (column.property === 'customPrice') {
          sums[index] = this.customPrice
        } else {
          sums[index] = ''
        }
      })
      return sums
    },

    loadData() {
      syntheseisRecord(this.listQuery).then(res => {
        this.totalRows = res.data.totalRows
        this.listData = res.data.rows
        this.customPrice = res.data.totalData.customPrice
      })
    },
    tableDate() {
      // if (!this.authorityHandle(199)) return
      this.$nextTick(() => {
        const html7 = this.$refs.multipleTable.$refs.footerWrapper
          .querySelector('.el-table__footer')
          .querySelectorAll('td')[7]
          .querySelector('.cell')
        html7.innerHTML = `${this.total_price !== '' ? this.total_price : ''} <a  style="text-decoration: underline;color: blue"><i class="el-icon-refresh"></i></a>`
        html7.onclick = () => {
          syntheseisRecordSumPrice({ field: 'total_price', ...this.listQuery }).then(res => {
            this.total_price = res.data
            this.tableDate()
          })
        }
      })
    },

    // 搜索查询事件
    handleFilter() {
      this.listQuery.pager.pageNo = 1
      this.loadData()
    }

  }

}
</script>
<style lang="scss" scoped>
$menuText: #14162E; // 侧边栏字体颜色
$hoverColor: #1D143C; // 鼠标停留主色调浅色
$mainColor: #3b425d; // 主色调

.op-container {
	padding: 0.833vw;
    position: relative;
    height: 100%;
    min-height: calc(100vh - 6.25vw);
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    margin-bottom: 0.833vw;
    background-color: #FDFDFD;
    margin-left: 0.833vw;
    margin-right: 0.833vw;
    margin-top: 1.667vw;
    border-radius: 0.417vw;
}

.filter-container {
	width: 100%;
	height: 48px;
	line-height: 48px;

	.filter-item {
		display: inline-block;
		vertical-align: middle;
		margin-bottom: 10px;
	}

	.el-date-editor {
		transform: translateY(-6px);
		background: #F8F7FB;
	}

	.kInput {
		position: absolute;
		right: 20px;
	}

	.filter-title {
		height: 48px;
		line-height: 48px;
		font-size: 16px;
		font-weight: 500;
		margin-right: 22px;
		color: #14162E;
	}

	.user-item {
		margin-left: 10px;
		margin-right: 20px;
	}

	.room-type,
	.user-status,
	.account-status {
		margin-right: 20px;
	}
}

.red_money {
	width: 200px;
}

.grid-div {
	display: grid;
	grid-template-columns: repeat(7, 120px);

	.item {
		height: 50px;
		font-size: 14px;
		line-height: 50px;
		text-align: center;
		border: 1px solid #E3E2E7;
		width: 120px;
		overflow: hidden;
		display: inline-block;
		text-overflow: ellipsis;
		white-space: nowrap;
		padding: 0 10px;
	}
}

.top-btn {
	margin: 30px 0px 30px 0px;
	font-size: 14px;
	color: #ffffff;

	&:nth-of-type(2) {
		margin-left: 10px;
	}
}

.kSelect .el-select .el-input .el-input__inner {
	width: 124px;
}

::v-deep .el-select .el-input.is-focus .el-input__inner {
	border-color: $mainColor;
}

::v-deep .el-input__inner:focus {
	border-color: $mainColor;
}

.el-form-item__label-wrap .el-form-item__label {
	float: none;
}

.dialog_creatRollRoom {
	display: flex;
	flex-direction: row;
	justify-content: center;
	margin: 40px 80px;

	::v-deep .el-select .el-select__tags>span {
		display: none;
	}

	::v-deep .el-range-editor.el-input__inner {
		width: 400px;
	}

	.el-tag+.el-tag {
		margin-left: 10px;
	}

	.el-tag {
		color: $mainColor;
		background-color: #ffffff;
		border-color: $mainColor;

		::v-deep .el-tag__close {
			color: $mainColor;
		}

		::v-deep .el-icon-close:hover {
			color: #ffffff;
			background: $mainColor;
		}
	}
}

.form-modify {
	display: flex;
	flex-direction: row;
	justify-content: center;
	margin: 10px 80px;
}

.rebate-box {
	width: 700px;
	box-sizing: border-box;

	.rebate-item {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-around;
		margin-bottom: 30px;

		.single-item {
			display: flex;
			align-items: center;

			.el-input {
				width: 80px;
				height: 40px;
				margin: 0 8px;

				::v-deep .el-input__inner {
					height: 40px;
				}
			}

			span {
				font-size: 14px;
			}

			&.right {
				margin-left: 10px;
			}
		}

		.handle {
			width: 50px;
			display: flex;
			justify-content: space-between;

			i {
				cursor: pointer;
				font-size: 18px;
			}
		}
	}
}

.redCode-box {
	width: 500px;
	display: flex;
	align-items: center;
	justify-content: center;

	span {
		font-size: 14px;
		margin-right: 10px;
	}

	.el-input {
		width: 240px;
		height: 40px;
		margin: 0 8px;

		::v-deep .el-input__inner {
			height: 40px;
		}
	}
}

.code-box {
	width: 464px;

	.red-item {
		display: flex;
		align-items: center;
		margin-bottom: 10px;

		span {
			width: 100px;
			font-size: 14px;
			text-align: right;
			margin-right: 10px;
		}

		.el-input {
			width: 240px;
			height: 40px;
			margin: 0 8px;

			::v-deep .el-input__inner {
				height: 40px;
			}
		}

		p {
			width: 240px;
			text-align: center;
			font-size: 16px;
			font-weight: bold;

			i {
				font-size: 18px;
				margin-left: 6px;
				cursor: pointer;
			}
		}
	}
}

.dialog-footer {
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	margin-top: 40px;
}

.chargeform {
	display: flex;
	flex-direction: row;
}

::v-deep .el-switch__label.is-active {
	color: $mainColor;
}

.addBox_dialog {
	display: flex;
	flex-direction: column;
	justify-content: center;

	::v-deep .el-dialog__body {
		width: 678px;
		margin: 40px 80px;
	}

	::v-deep .el-select .el-select__tags>span {
		display: none;
	}

	.el-tag+.el-tag {
		margin-left: 10px;
	}

	.el-tag {
		color: $mainColor;
		background-color: #ffffff;
		border-color: $mainColor;

		::v-deep .el-tag__close {
			color: $mainColor;
		}

		::v-deep .el-icon-close:hover {
			color: #ffffff;
			background: $mainColor;
		}
	}
}

.cell-baby {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;

}

.ellipsis-span {
	width: 80px;
	overflow: hidden;
	display: inline-block;
	text-overflow: ellipsis;
	white-space: nowrap;
}
</style>
